<template>
  <div id="app">
      <div class="top">
          <header class="header">
              <span><</span>
              <span>☢</span>
          </header>
          <figure>
              <div class="img_left">
                  <img src="https://fuss10.elemecdn.com/9/da/99e61b6978553324d485a70c67ebapng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/">
              </div>
              <div class="text_right">
                  <h3>张飞牛肉（北京站店）</h3>
                  <p><span>商家配送</span>/<span>47分钟送达</span>/<span>配送费￥7</span></p>
                  <p>公告：欢迎光临，用餐高峰期请提前下单，谢谢。</p>
              </div>
          </figure>
          <div class="fo">
              <p><span>首</span><span>新用户下单立减17元(不与其它活动同享)</span></p>
              <p>16个活动▶</p>
          </div>
          <nav class="nav">
          <router-link v-for="(v,i) in nav" :key="i" tag="div" :to="v.path">{{v.name}}</router-link>
      </nav>
      </div>
      <!--  -->
      


      <!--  -->
      <div class="kon"></div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name:'app',
  data () {
      return {
          nav:[
              {
                  name:"商品",
                  path:'/list1'
              },
              {
                  name:"评价",
                   path:'/list2'
              },
              {
                  name:"店铺",
                   path:'/list3'
              }
          ]
      }
  }
}
</script>

<style scoped lang="less">
.px2rem(@name, @px) {@{name}: @px / 75 * 1rem;}
.top{
    width: 100%;
    background: #a56f7b;
    position: fixed;
    left: 0;
    top: 0;
.header{
    width: 100%;
    .px2rem(height, 100);
    .px2rem(font-size, 40);
    font-weight: bolder;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span{
        width: 8%;
        text-align: center;
        color: white;
        }
    }
    figure{
        width: 100%;
        .px2rem(height, 170);
        display: flex;
        .img_left{
            .px2rem(width, 180);
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                .px2rem(height, 150);
                .px2rem(width, 150);
            }
        }
        .text_right{
            flex: 1;
            h3{
                .px2rem(height, 65);
                .px2rem(line-height, 65);
                .px2rem(font-size, 32);
                font-weight: bolder;
                color: white;
            }
            p:nth-child(2){
                .px2rem(height, 50);
                .px2rem(line-height, 50);
                color: silver;
                span{
                    color: white;
                }
            }
            p:nth-child(3){
                .px2rem(height, 50);
                .px2rem(line-height, 50);
                color: white;
                
            }
        }
    }
    .fo{
        width: 95%;
        margin: 0 auto;
        .px2rem(height, 70);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .px2rem(font-size,20);
        color: white;
        p:nth-child(1){
            span:nth-child(1){
                background: #70bc46;
                border-radius: 2px;
                color: white;
                .px2rem(margin-right, 10);
                .px2rem(font-size, 20);
            }
        }
    }
}
.nav{
    width: 100%;
    .px2rem(height, 80);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9e9e9;
    background: white;
    div{
        width: 100/3%;
        text-align: center;
    }
}



.kon{
    .px2rem(height, 100);
}
</style>